<template>
  <div>
    <div style="width: 100%;height: 100px;">
      <header>
        <div class="nav-header common">
          <!--            logo标签-->
          <div class="logo">
            <img src="http://localhost:8080/images/index-logo.jfif" alt="加载失败">
          </div>
          <!--            导航栏-->
          <nav class="nav">
            <ul>
              <li>
                <div @click="$router.push('/')">首页</div>
              </li>
              <li @click="$router.push('/taskCenter')">
                <div>接单中心</div>
              </li>
              <li>
                <div @click="$router.push('/userCenter')">个人中心</div>
              </li>
            </ul>
          </nav>
        </div>
      </header>
    </div>
  </div>
</template>

<script>
export default {
  name: "navHeader"
}
</script>

<style scoped>
header {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: rgb(254, 248, 231);
  z-index: 20;
}

.common-avatar {
  height: 50px;
}

.common {
  margin: 0 auto;
  width: 1200px;
}


.nav-header .logo {
  margin-top: 0;
  float: left;
  width: 100px;
  height: 100px;
}

.nav-header .logo img {
  height: 80px;
  margin-left: 300px;
}

.nav-header .nav ul li:first-child {
  margin-left: 300px;
}

.nav-header .nav ul li {
  float: left;
  margin: 0 20px;
  width: 100px;
  height: 80px;
  text-align: center;
  line-height: 80px;
}

.nav-header .nav ul li div {
  font-size: 14px;
  color: red;
}

.nav-header .nav ul li div:hover {
  cursor: pointer;
}

.nav-header .nav ul li:hover {
  border-bottom: red 2px solid;
}
</style>